<!DOCTYPE html>
<html lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title></title>
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<!-- STYLESHEETS -->
<!--[if lt IE 9]><script src="../../js/flot/excanvas.min.js"></script><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
<link rel="stylesheet" type="text/css"
	href="../../css/themes/default.css" id="skin-switcher">
<link rel="stylesheet" type="text/css" href="../../css/responsive.css">

<link href="../../font-awesome/css/font-awesome.min.css"
	rel="stylesheet">
<!-- file-input -->
<link rel="stylesheet" type="text/css"
	href="../../js/file-input/fileinput.css" />
<!-- SELECT2 -->
<link rel="stylesheet" type="text/css"
	href="../../js/select2/select2.min.css" />
<!-- UNIFORM -->
<link rel="stylesheet" type="text/css"
	href="../../js/uniform/css/uniform.default.min.css" />
<!-- datatable -->
<link rel="stylesheet" href="../../js/datatables/datatable.css">
<!-- WIZARD -->
<link rel="stylesheet" type="text/css"
	href="../../js/bootstrap-wizard/wizard.css" />
<link rel="stylesheet" href="../../js/datepicker/datepicker.css">
<!-- FONTS 
	<link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
-->
<!-- JQUERY -->
<script src="../../js/jquery/jquery-2.0.3.min.js"></script>
<script src="../../js/common.js"></script>
</head>

<body>
	<header class="navbar clearfix" id="header"> </header>

	<!-- PAGE -->
	<section id="page">
		<!-- SIDEBAR -->
		<div id="sidebar" class="sidebar">
			<div class="sidebar-menu nav-collapse">

				<!-- SIDEBAR MENU -->
				<ul>

				</ul>
				<!-- /SIDEBAR MENU -->
			</div>

		</div>
		<!-- /SIDEBAR -->
		<div id="main-content">

			<div class="container">
				<div class="row">
					<div id="content" class="col-lg-12">
						<!-- PAGE HEADER-->
						<div class="row">
							<div class="col-sm-12">
								<div class="page-header">
									<!-- STYLER -->

									<!-- /STYLER -->
									<!-- BREADCRUMBS -->
									<ul class="breadcrumb">
										<li><i class="fa fa-home"></i> <a href="index.html">首页</a>
										</li>
										<li><a href="#">商品管理</a></li>
										<li>维护商品</li>
									</ul>
									<!-- /BREADCRUMBS -->

								</div>
							</div>
						</div>
						<!-- /PAGE HEADER -->
						<!-- SAMPLE -->
						<form id="form_promotion">

							<div class="row col-md-12">
								<div class="box border primary" style="margin-left: 20px;">
									<div class="box-title">
										<h4>
											<i class="fa fa-bars"></i>促销设置
										</h4>
									</div>
									<div class="box-body big" style="padding: 10px;">


										<div class="form-group mrg-bt10-right"
											style="margin-top: 10px;">
											<label class="control-label col-md-3"><span
												class="required">*</span>卡券名称：</label>
											<div class="col-md-8 inline">
												<input type="text" class="form-control width-50"
													name="cardTitle" onfocus="this.select()"
													onmouseover="this.onfocus()" placeholder="请输入活动名称"
													maxlength="50" /> <input type="hidden" name="id" /> <span
													class="error-span"></span>
											</div>
										</div>
										<div class="form-group mrg-bt10-right"
											style="margin-top: 20px">
											<label class="control-label col-md-3"><span
												class="required">*</span>卡劵类型：</label>
											<div class="col-md-8" style="text-align: left">
												<select id="card_type_select"
													class="col-md-6 select2-offscreen" tabindex="-1">
													<option value="BasicsGift">基础礼</option>
													<option value="QueenGift">女王礼</option>
													<option value="BirthdayGift">生日礼</option>
													<option value="DrawPrize">抽奖</option>
													<option value="ShareReward">分享红包</option>
													<option value="PullNew">拉新</option>
												</select>

											</div>
										</div>
										<div class="form-group mrg-bt10-right"
											style="margin-top: 20px">
											<label class="control-label col-md-3"><span
												class="required">*</span>赠品类型：</label>
											<div class="col-md-8" style="text-align: left">
												<select id="card_mode_select"
													class="col-md-6 select2-offscreen" tabindex="-1">
													<option value="Goods">实物</option>
													<option value="Coupon">优惠券</option>
													<option value="BalancePrice">成长基金</option>
													<option value="Card">功能卡</option>
												</select>

											</div>
										</div>
										<div class="form-group mrg-bt10-right" id="rangDate">
											<label class="control-label col-md-3"><span
												class="required">*</span>生效月份：</label>
											<div class="col-md-6 inline" style="display: inline-flex">
												<input type="text"
													class="form-control width-50 bootstrap-datepicker Wdate"
													runat="server" name="startDate"
													style="width: 110px; height: 34px;" /> <input type="text"
													class="form-control width-50 bootstrap-datepicker"
													name="endDate" style="width: 120px; display: none" /> <span
													class="error-span"></span>
											</div>
										</div>
										<div class="form-group mrg-bt10-right goods">
											<label class="control-label col-md-3"><span
												class="required">*</span>商品编码：</label>
											<div class="col-md-8 inline">
												<input name="productCode" class="form-control"
													placeholder="请输入商品编码，以英文逗号分隔"
													style="width: 600px; resize: none; height: 40px" />
												<span class="error-span"></span>
											</div>
										</div>

										<div class="form-group mrg-bt10-right coupon"
											style="display: none;">
											<label class="control-label col-md-3"><span
												class="required">*</span>优惠券批次：</label>
											<div class="col-md-8 inline">
												<input type="text" class="form-control width-50"
													name="couponId" placeholder="请输入优惠券批次" maxlength="10" /> <span
													class="error-span"></span>
											</div>
										</div>
										<div class="form-group mrg-bt10-right balance"
											style="display: none;">
											<label class="control-label col-md-3"><span
												class="required">*</span>成长基金金额：</label>
											<div class="col-md-8 inline">
												<input type="text" class="form-control width-50"
													name="balancePrice" onkeypress="return $.IsDecimal(event);"
													onblur="return $.IsMoney(this);" onfocus="this.select()"
													onmouseover="this.onfocus()" placeholder="请输入优惠门槛"
													maxlength="10" /> <span class="error-span"></span>
											</div>
										</div>
										<div class="form-group mrg-bt10-right">
											<label class="control-label col-md-3">备注：</label>
											<div class="col-md-8 inline">
												<input type="text" class="form-control width-50"
													name="remark" maxlength="10" /> <span class="error-span"></span>
											</div>
										</div>
									</div>

								</div>
							</div>
						</form>
						<div class="row" style="height: 30px;">
							<div class="col-md-12" style="text-align: center;">
								<div class="box ">
									<a href="#" class="btn btn-success config bt-submit"
										style="width: 100px"> 保存 </a>
								</div>
							</div>
						</div>
					</div>
				</div>


				<!-- /SAMPLE -->

				<div class="footer-tools">
					<span class="go-top"> <i class="fa fa-chevron-up"></i> Top
					</span>
				</div>
			</div>
			<!-- /CONTENT-->
		</div>
	</section>
	<!--/PAGE -->
	<!-- JAVASCRIPTS -->
	<!-- Placed at the end of the document so the pages load faster -->

	<!-- BOOTSTRAP -->
	<script src="../../bootstrap-dist/js/bootstrap.min.js"></script>

	<!-- BLOCK UI -->
	<script type="text/javascript"
		src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
	<!--bootbox-->
	<script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
	<!-- AUTOSIZE -->
	<script type="text/javascript"
		src="../../js/autosize/jquery.autosize.min.js"></script>
	<!-- spinner -->
	<script src="../../js/spinner/spin.js"></script>
	<!-- INPUT MASK -->

	<script type="text/javascript"
		src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>
	<!-- UNIFORM -->
	<script type="text/javascript"
		src="../../js/uniform/jquery.uniform.min.js"></script>
	<!-- DATA TABLES -->
	<script type="text/javascript"
		src="../../js/datatables/bootstrap-select.js"></script>
	<script type="text/javascript" src="../../js/datatables/datatable.js"></script>
	<script type="text/javascript"
		src="../../js/datatables/datatable-bootstrap.js"></script>
	<script type="text/javascript"
		src="../../js/datatables/datatable-tabletools.js"></script>
	<script type="text/javascript" src="../../js/datatables/fnAddTr.js"></script>


	<!-- SELECT2 -->
	<script type="text/javascript" src="../../js/select2/select2.min.js"></script>

	<!-- <script type="text/javascript" src="../../js/datepicker/datepicker.js"></script> -->
	<script src="../../js/jquery-validate/jquery.validate.min.js"></script>
	<!-- COOKIE -->
	<script type="text/javascript"
		src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
	<!-- CUSTOM SCRIPT -->
	<script src="../../js/script.js"></script>

	<script src="../../js/Sortable.min.js"></script>
	<script language="javascript" type="text/javascript"
		src="../../js/My97DatePicker/WdatePicker.js"></script>
	<script>
		var AddCard = function() {
			var wizform = $('#form_promotion');
			var selectProducts = [];//参与活动的商品
			var id, flag;
			var $mainDataTable = null, $promotionDataTable;
			var formValiInit = function() {
				wizform.validate({
					doNotHideMessage : true,
					errorClass : 'error-span',
					errorElement : 'span',
					rules : {
						cardTitle : {
							required : true
						},
                        startDate : {
                            required : true
                        },
						balancePrice : {
							required : true
						},
						productIds : {
							required : true
						},
						couponId : {
							required : true
						}
					},
					highlight : function(element) {
						$(element).closest('.form-group').removeClass(
								'has-success').addClass('has-error');
					},

					unhighlight : function(element) {
						$(element).closest('.form-group').removeClass(
								'has-error');
					},
					success : function(label) {
						if (label.attr("for") == "gender") {
							label.closest('.form-group').removeClass(
									'has-error').addClass('has-success');
							label.remove();
						} else {
							label.addClass('valid').closest('.form-group')
									.removeClass('has-error').addClass(
											'has-success');
						}
					}
				});
			};

			var saveCard = function() {
				if (wizform.valid() == false)
					return false;
				var card = {};
				if (id != null)
					card.id = id;
				card.title = $("input[name=cardTitle]").val();
				card.cardType = $("#card_type_select").val();
				card.cardMode = $("#card_mode_select").val();
				card.balancePrice = $("input[name=balancePrice]").val();
				card.productCode = $("input[name=productCode]").val();
				card.couponId = $("input[name=couponId]").val();
				if ($("input[name=startDate]").val() !== "") {
                    card.startDate = $("input[name=startDate]").val() + "-01";
                }
				card.remark = $("[name=remark]").val();

				$.blockUI();
				var url = App.getContextPath() + "admin/card/edit.do";

				$.ajax({
					type : "post",
					url : url,
					data : $.param({
						card : JSON.stringify(card)
					}),
					async : true,
					success : function(result) {
						console.log(result);
						$.unblockUI();
						if (result.type == "error") {
							$.alert(result.content);

						} else {
							location.href = "card_coupon_list.html";
						}
					}
				});
			};

			var selectChange = function(type, mode) {
				$("#rangDate").show();
                if (mode === 'Goods') {
                    if (type === "PullNew") {
                        $("#rangDate").hide();
                    }
                    $(".goods").show();
                    $(".coupon").hide();
                    $(".balance").hide();
                } else if (mode == 'Coupon') {
                    $(".coupon").show();
                    $(".goods").hide();
                    $(".balance").hide();
                } else if (mode === 'Card') {
                    $("#rangDate").hide();
                    $(".coupon").hide();
                    $(".goods").hide();
                    $(".balance").hide();
                } else {
                    $(".balance").show();
                    $(".goods").hide();
                    $(".coupon").hide();
                }
			};

			//获取活动详情
			var getCard = function(id) {
				$.ajax({
					type : "post",
					url : App.getContextPath() + "admin/card/findById.do",
					data : {
						cardId : id
					},
					async : true,
					success : function(result) {
						result = result.extra;
						$("[name=cardTitle]").val(result.title);
						//  $("input[name='cardType'][value='"+result.cardType+"']").attr("checked",true); 
						$("#card_type_select").select2("val", result.cardType);
						$("#card_mode_select").select2("val", result.cardMode);
						$("#card_type_select").attr("disabled", true);
						$("#card_mode_select").attr("disabled", true);
						$("[name=balancePrice]").val(result.balancePrice);
						$("[name=remark]").text(result.remark);
						$("[name=productCode]").val(result.productCode);
						$("[name=couponId]").val(result.couponId);
						$("[name=startDate]").val(
								new Date(parseInt(result.startDate))
										.format("yyyy-MM"));
						$(".uniform").uniform();
                        selectChange(result.cardType, result.cardMode)
					}
				});
			};

			var selectMonth = function() {
				WdatePicker({
					dateFmt : 'yyyy-MM',
					isShowToday : true,
					isShowClear : false
				});
			};
			return {
				init : function() {
					App.init();
					formValiInit();
					$(".uniform").uniform();
					// $.initDate($("#rangDate"),0,30);					  
					// $("input[name=startDate]").bsdatepicker("setValue",$.nowDate());

					$("input[name=startDate]").click(selectMonth);
					$(".bt-submit").click(saveCard);
					id = $.getUrlParam("id");
					if (id != null) {
						getCard(id)
					}
                    $("#card_type_select").select2().change(function(){
                        selectChange($(this).val(), $("#card_mode_select").val());
					});
					$("#card_mode_select").select2().change(function() {
                        selectChange($("#card_type_select").val(), $(this).val());
					});
					$("#card_mode_select").select2().change();
					$("#card_type_select").select2().change();

				}
			}
		}();
		$(function() {

			$("#header").load("../head.html");
			AddCard.init();
		});
	</script>

	<!-- /JAVASCRIPTS -->
</body>

</html>